<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>ScrollableMixin-custom</title>

	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/declare",
			"dojo/_base/window",
			"dijit/_WidgetBase",
			"dijit/_Container",
			"dijit/_Contained",
			"dojox/mobile/_ScrollableMixin",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat"
		], function(declare, win, WidgetBase, Container, Contained, ScrollableMixin){
			dojox.mobile.ScrollablePane = declare(
				"dojox.mobile.ScrollablePane",
				[WidgetBase, Container, Contained, ScrollableMixin],
			{
				buildRendering: function(){
					this.inherited(arguments);
					this.containerNode = win.doc.createElement("DIV");
					this.containerNode.className = "mblScrollableViewContainer";
					this.containerNode.style.backgroundColor = "yellow";
					this.containerNode.style.border = "1px solid red";
					this.containerNode.style.position = "absolute";
					this.containerNode.style.width = "100%";
					for(var i = 0, idx = 0, len = this.srcNodeRef.childNodes.length; i < len; i++){
						var c = this.srcNodeRef.childNodes[idx];
						this.containerNode.appendChild(this.srcNodeRef.removeChild(c));
					}
					this.domNode.appendChild(this.containerNode);
				}
			});
		});
	</script>

	<style>
	html, body{
		height: 100%;
		overflow: hidden;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	#view1 {
		position: relative;
		height: 100%;
		overflow: hidden;
	}
	#header1 {
		position: relative;
		margin: 0px;
		width: 100%;
		top: 0px;
		background-color: cyan;
		z-index: 1;
	}
		
	</style>
</head>
<body style="visibility:hidden;">
	<h1 id="header1">Fixed Header</h1>
	<div id="view1" data-dojo-type="dojox.mobile.ScrollablePane">
		<ol>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
		</ol>
	</div>
</body>
</html>
